<template>
    <up-code :seconds="seconds" @end="end" @start="start" ref="uCodeRef" @change="codeChange"></up-code>
    <up-button @tap="getCode" class="h-20rpx" size="small" type="success">{{ tips }}</up-button>
</template>

<script setup>
import { userSendSms } from '@/apis/user';
import { ref } from 'vue';

const tips = ref('');
const seconds = ref(10);
const uCodeRef = ref(null);
const props = defineProps({
    mobile: {
        type: String,
    },
});
const codeChange = (text) => {
    tips.value = text;
};

const getCode = async () => {
    if (!uCodeRef.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
            title: '正在获取验证码',
        });
        if (!props.mobile) {
            uni.$u.toast('请输入手机号');
            return;
        }
        uni.$u.toast('正在获取验证码');
        userSendSms({
            mobile: props.mobile
        });
        uni.$u.toast('验证码已经发送');
        uCodeRef.value.start();
    } else {
        uni.$u.toast('倒计时结束后再发送');
    }
};

const end = () => {
    // uni.$u.toast('倒计时结束');
};

const start = () => {
    // uni.$u.toast('倒计时开始');
};
</script>

<style lang="scss">
.wrap {
    padding: 24rpx;
}
</style>